<!-- 政策内页 -->
<template>
  <div class="policy_main">
    <!-- 头部 -->
    <headNav />
    <div class="policy_list mindWidth">
      <div class="policy_crumbs">
        <p class="changeHanld" @click="$router.push('/enterprise?id=' + companyId)">荣誉</p>
        <span>></span>
        {{ titleText }}
      </div>
      <div class="policy_title">
        <div class="title_L">
          <span
            @click="handleClick(0)"
            class="changeHanld"
            :class="isSelect == 0 ? 'active' : ''"
          >相关政策</span>
          <span
            @click="handleClick(1)"
            class="changeHanld"
            :class="isSelect == 1 ? 'active' : ''"
          >公示名单</span>
        </div>
        <!-- <div class="title_R">发布日期</div> -->
      </div>

      <div v-show="type === 1" class="policy-box">
        <div v-if="dataList.length" class="policy-container">
          <div
            class="policy_content"
            v-for="(item, index) in dataList"
            :key="index"
            @click="toPolicy(item)"
          >
            <div class="policy_content_text changeHanld singlerows">
              <a target="_blank">{{ item.title }}</a>
            </div>
            <div class="policy_content_item"></div>
            <div class="policy_content_time">{{ item.date }}</div>
          </div>
        </div>

        <div v-else class="policy-container">
          <div class="content_image">
            <img src="../../../static/image/noDataBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <!-- 公示名单 -->
      <div v-show="type === 2" class="public-box">
        <div v-if="publicList.length" class="policy-container">
          <div class="policy_content" v-for="(item, index) in publicList" :key="index">
            <div class="policy_content_text flex items-middle space-between">
              <p class="changeHanld singlerows">{{ titleText }}公示名单</p>
              <a v-if="item.policyId" :href="`/inform/${item.policyId}`" target="blank">名单来源</a>
              <a
                v-if="!item.policyId && item.originalLink"
                :href="item.originalLink"
                target="blank"
              >名单来源</a>
              <p @click="toDetail(item)" class="changeHanld singlerows">相关企业</p>
            </div>
            <div class="policy_content_time">{{ item.releaseDate }}</div>
          </div>
        </div>

        <div v-else class="policy-container">
          <div class="content_image">
            <img src="../../../static/image/noDataBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <div class="page">
        <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" :pageNo="pageNos" />
      </div>
    </div>
    <navigation></navigation>
    <!-- 底部 -->
    <footerNav />
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import { commonRequest, postRequest } from "../../api/api.js";
import { getCode } from "../../util/address.js";
export default {
  components: {
    paging
  },
  data() {
    return {
      isSelect: 0, // 是否选中标题
      titleText: this.$route.query.title, // 标题文字内容
      companyId: this.$route.query.id, // 企业id
      dataList: [],
      pageNos: 1,
      type: 1,
      publicList: []
    };
  },
  mounted() {
    this.getDataList(); // 获取数据列表
  },
  methods: {
    handleClick(index) {
      this.isSelect = index; // 点击切换类名
      this.type = index + 1;
      this.pageNos = 1;
      if (index === 0) {
        this.getDataList();
      } else {
        this.getPublicList();
      }
    },
    accept_CurrentValue(value) {
      this.pageNos = value;
      if (this.isSelect === 0) {
        this.getDataList();
      } else {
        this.getPublicList();
      }
    },
    // 获取公司公示名单
    getPublicList() {
      let params = {
        name: this.titleText,
        pageNo: this.pageNos,
        pageSize: 10,
        companyId: this.companyId
      };
      commonRequest(
        "/api/cms/cmsHonorProject/getProjectBatchNumber",
        params
      ).then(res => {
        this.publicList = res.records;
        this.$refs.paging_zi.totalValue(res.total);
      });
    },
    // 相关政策
    getDataList() {
      let { province, city } = this.$route.query;
      let area = "";
      let obj = {
        beginDate: "",
        dq: getCode(province, city, area),
        endDate: "",
        pageIndex: this.pageNos - 1,
        pageSize: 10,
        policyId: "",
        source: "",
        title: this.titleText,
        tzlb: this.isSelect === 0 ? "通知" : "公示",
        userID: ""
      };
      postRequest("/api/es/Policy/queryPolicyList.json", obj).then(res => {
        if (res.retCode == 0) {
          this.dataList = res.data.content;
          this.$refs.paging_zi.totalValue(res.data.totalElements);
        }
      });
    },
    // 公示名单详情
    toDetail(item) {
      window.open(
        `/publicDetail?num=${item.batchNo}&companyId=${this.companyId}&title=${this.titleText}`,
        "_blank"
      );
    },
    toPolicy(item) {
      window.open(`/inform/${item.policyId}`);
    },
    toCompanyDetail() {
      window.open("/enterprise/honor?id=" + this.companyId, "_blank");
    }
  }
};
</script>
<style lang="less" scoped>
.policy_list {
  .policy_crumbs {
    height: 80px;
    display: flex;
    align-items: center;

    span {
      margin: 10px;
    }
  }

  .policy_title {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title_L {
      font-size: 14px;

      span {
        margin-right: 60px;
        position: relative;

        &.active {
          line-height: 60px;
          font-size: 18px;
          font-weight: 700;

          &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -20px;
            width: 72px;
            height: 4px;
            border-radius: 10px;
            background-color: #44a2ff;
          }
        }
      }
    }

    .title_R {
      font-size: 14px;
    }
  }

  .policy-container {
    width: 100%;
    min-height: 515px;
  }
  .policy_content {
    display: flex;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
    background-color: #fff;

    .policy_content_text {
      width: 800px;
      p {
        &:hover {
          color: #44a2ff;
        }
      }
      a {
        color: #000;
        &:hover {
          color: #44a2ff;
        }
      }
    }

    .policy_content_item {
      span {
        font-size: 14px;
        margin-left: 15px;
      }
    }
  }

  .content_image {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    image {
      width: 300px;
    }
    p {
      color: rgb(204, 204, 204);
      font-size: 14px;
      margin-top: 10px;
    }
  }

  .company-box {
    width: 100%;
    margin: 20px 0;
    min-height: 515px;
    .list-title {
      width: 100%;
      font-size: 16px;
      color: rgba(96, 98, 100, 0.63);
      font-weight: 600;
      padding: 15px 0;
      .lable-title:first-child {
        width: 20%;
        text-align: center;
      }
    }
    .list-content {
      width: 100%;
      .list-item {
        font-size: 14px;
        color: #666666;
        border-top: 1px solid #eeeeee;
        padding: 15px 0;
        background: #ffffff;
        div:first-child {
          width: 20%;
          text-align: center;
        }
      }
      .list-item:nth-child(even) {
        background: #f5f5f5;
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: flex-end;
}
</style>
